<!DOCTYPE html>
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
      <canvas width="600" height="400"></canvas>
</body>

</html>
<script>
    let canvas = document.querySelector("canvas")
    let ctx = canvas.getContext("2d")


    // ctx.moveTo(0,0)
    // ctx.lineTo(100,100)
    // ctx.strokeStyle = 'red'
    // ctx.lineWidth = 5
    // ctx.stroke()

    // ctx.beginPath()         // 新奇一个路径
    // ctx.moveTo(100,100)
    // ctx.lineTo(200,0)
    // ctx.strokeStyle = 'green'
    // ctx.stroke()


    // 钟表
    // 绘制一个圆
    ctx.translate(300, 200)
    ctx.arc(0, 0, 100, 0, Math.PI * 2, false)
    ctx.stroke()


    // 绘制直线
    for (let i = 0; i < 12; i++) {
        ctx.save()       // 保存原来坐标系
        ctx.rotate(i * 30 * Math.PI / 180)     // 旋转坐标系
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(100, 0)
        ctx.stroke()  // 恢复到原来坐标系
        ctx.restore()   //   重置
    }  
    // 绘制内圆
    ctx.beginPath()
    ctx.arc(0, 0, 90, 0, Math.PI * 2, false)
    ctx.fillStyle = "#fff"
    ctx.fill()

    // 写数字
    ctx.beginPath()
    ctx.fillStyle="black"
    let arr=["III","IV","V","VI","VII","VIII","IX","X","XI","XII","I","II"]
    for(let i=0;i<12;i++){
        let x=80*Math.cos(i*30*Math.PI/180) 
        let y=80*Math.sin(i*30*Math.PI/180)

        ctx.font="15px 微软雅黑"
        ctx.textAlign="center"
        ctx.textBaseline="middle"
        ctx.fillText(arr[i],x,y)  //  填写文字
    }

    // 写品牌
    ctx.beginPath()
    ctx.font="13px 微软雅黑"
    ctx.fillText("Dianel Wellington",0,-30)


</script>